<template>
    <el-dialog v-model="dialogShow" :close-on-click-modal="false" custom-class="mydialog" width="450px" :title="title"
               @close="close">
        <el-form ref="openRef" :model="formData" :rules="rules" label-width="110px" size="small">
            <el-form-item label="联系人姓名" prop="linkmanName">
                <el-input v-model="formData.linkmanName" placeholder="请输入联系人姓名" />
            </el-form-item>
            <el-form-item label="联系电话" prop="tel">
                <el-input v-model="formData.tel" placeholder="请输入联系电话" />
            </el-form-item>
            <el-form-item label="职位" prop="linkmanPost">
                <el-input v-model="formData.linkmanPost" placeholder="请输入职位" />
            </el-form-item>
        </el-form>

        <template #footer>
            <div class="dialog-footer" style="display:flex;justify-content:center;align-items:center;">
                <el-button class="border-btn" size="small" style="margin-right: 20px;" @click="close">取消</el-button>
                <el-button class="main-btn" size="small" type="primary" @click="confirm">保存</el-button>
            </div>
        </template>
    </el-dialog>
</template>

<script>
    import { validateVETel } from "@/utils/validate";
    import { defineComponent, reactive, toRefs, inject, getCurrentInstance } from 'vue'
    export default defineComponent({
        name: "addContact",
        emits:['success'],
        props:{
            id:{
                type:Number,
                default:0
            },
            type:{
                type:String,
                default:'1'
            }
        },
        setup(props,{emit}){
            const validateTel = (rule, value, callback) => {
                if (value === "") {
                    callback(new Error("请输入手机号"));
                } else {
                    if (validateVETel(value)) {
                        callback(new Error("手机号格式不正确"));
                    } else {
                        callback();
                    }
                }
            };

            const currentInstance = getCurrentInstance()
            const api = inject('api')
            const rules = {
                tel: [{ required: true, validator: validateTel, trigger: "blur" }],
                linkmanName: [
                    { required: true, message: "请输入联系人姓名", trigger: "blur" },
                ],
                linkmanPost: [
                    { required: true, message: "请输入联系人职位", trigger: "blur" },
                ],
            }

            var data = reactive({
                dialogShow:false,
                openRef:null,
                formData:{
                    id:0,
                    linkmanName:'',
                    tel:'',
                    linkmanPost:'',
                    relationId:0,
                    modelType:''
                },
                title:'新增联系人'
            })

            const close = () => {
                data.dialogShow = false
                data.formData = {
                    id:0,
                    linkmanName:'',
                    tel:'',
                    linkmanPost:'',
                    relationId:0,
                    modelType:''
                }
                setTimeout(()=>{
                    data.openRef.clearValidate()
                },500)
            }

            const confirm = () => {
                data.openRef.validate((valid) => {
                    if (valid) {
                        let a = {...data.formData}
                        a.relationId = props.id
                        if (props.type == 1){
                            a.modelType = 'agent'
                        }else if (props.type == 2){
                            a.modelType = 'seller'
                        }else if (props.type == 3){
                            a.modelType = 'terminal'
                        }

                        if (a.id > 0){
                            api.terminal.CONTACT_UPDATE(a).then((res) => {
                                if (res.code === 0) {
                                    currentInstance.proxy.customMessage({
                                        type: "success",
                                        message: "修改成功",
                                    });
                                    emit("success");
                                    close();
                                } else {
                                    currentInstance.proxy.customMessage({
                                        type: "error",
                                        message: res.msg,
                                    });
                                }
                            });
                        }else{
                            api.terminal.CONTACT_CREATE(a).then((res) => {
                                if (res.code === 0) {
                                    currentInstance.proxy.customMessage({
                                        type: "success",
                                        message: "创建成功",
                                    });
                                    emit("success");
                                    close();
                                } else {
                                    currentInstance.proxy.customMessage({
                                        type: "error",
                                        message: res.msg,
                                    });
                                }
                            });
                        }
                    }
                });
            }

            const open = (item) => {
                data.dialogShow = true
                if (item && item.id > 0){
                    data.title = '编辑联系人'
                    data.formData.id = item.id
                    data.formData.linkmanName = item.linkmanName
                    data.formData.tel = item.tel
                    data.formData.linkmanPost = item.linkmanPost
                }else{
                    data.title = '新增联系人'
                }
            }

            return{
                ...toRefs(data),
                rules,

                close,
                confirm,
                open,
            }
        }
    })
</script>

<style scoped>

</style>
